import { Form, Toast, Button, Checkbox, Icon } from '@douyinfe/semi-ui'
import { IconEyeClosedSolid, IconEyeOpened, IconSpin } from '@douyinfe/semi-icons'

import { useTranslation } from 'react-i18next'
const LoginView = styled.div`
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 450px;
    /* height: 600px; */
    background-color: var(--semi-color-bg-0);
    padding: 10px 30px;
    border: rgba(255, 255, 255, 0.1) solid 2px;
    border-radius: 10px;
    color: var(--semi-color-text-1);
    font-size: 14px;
    animation: am-in-body-winLogin-form 0.8s forwards;
    .item {
      margin-bottom: 15px;
      font-size: 12px !important;
    }
    .form-title {
      h1 {
        font-size: 30px;
        font-weight: normal;
        margin-bottom: 0;
      }

      p {
        font-size: 12px;
        padding-bottom: 10px;
      }
    }
    .form-input {
      padding: 4px 20px;
      border: var(--semi-color-fill-1) solid 2px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;

      p {
        font-size: 10px;
        color: var(--semi-color-text-3);
        margin-top: 8px;
        margin-bottom: 2px;
        opacity: 0.7;
      }
      input {
        border: none;
        background-color: transparent;
        padding: 0px;
        font-size: 16px;
        /* line-height: 1.2em; */
        height: 30px;
        margin-bottom: 4px;
        color: var(--semi-color-text-2);
      }
    }
  }
`

const Login = () => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const [hidePassword, setHidePassword] = useState(true)
  const handleSubmit = (values: any) => {
    const tid = Toast.info({
      top: 60,
      theme: 'light',
      content: '请求中...',
      duration: 0,
      showClose: false,
      icon: <IconSpin spin />,
    })
    LDAPI.login(['admin', '111111'])
      .then((res) => {
        navigate('/')
        Toast[res.code == 200 ? 'success' : 'error']({
          duration: 1,
          showClose: true,
          content: res.message,
          icon: null,
          id: tid,
        })
      })
      .catch((error: any) => {
        Toast.error(error.data.errors[0].detail)
      })
  }
  return (
    <>
      <LoginView>
        <div className="login-form">
          <div className="item form-title">
            <div>
              <h1>{t('CREATE AN ACCOUNT')}</h1>
              <p className="py-2">
                {t('Existing account?')}{' '}
                <a href="#" onClick={() => navigate('/')}>
                  {t('Click here')}
                </a>{' '}
                {t('to login to your account')}
              </p>
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('USERNAME')}</p>
              <input type="text" placeholder={t('Please enter your username')} />
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('PHONE / E-MAIL')}</p>
              <input type="text" placeholder={t('Please enter your phone number or email')} />
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('PASSWORD')}</p>
              <div className="flex justify-between items-center">
                <input type={hidePassword ? 'password' : 'text'} placeholder={t('Please enter your password')} />
                <Icon
                  onClick={() => {
                    setHidePassword(!hidePassword)
                  }}
                  svg={hidePassword ? <IconEyeOpened /> : <IconEyeClosedSolid />}
                  title={hidePassword ? t('show password') : t('hide password')}
                  className="hover:color-[--semi-color-text-2] cursor-pointer transition-color"
                />
              </div>
            </div>
          </div>

          <div className="item">
            <div className="form-input">
              <p>{t('Verification code')}</p>
              <input type="text" placeholder={t('Please enter Verification code')} />
            </div>
          </div>

          <div className="item">
            <div className="flex flex-col">
              <Button size="large" theme="solid" type="primary" onClick={handleSubmit}>
                {t('CREATE AN ACCOUNT')}
              </Button>
            </div>
          </div>
        </div>
      </LoginView>
    </>
  )
}

export default Login
